<!DOCTYPE html>
<html>
<head>
	<title>CSDN</title>
	<style>
	/* reset */

		* {
			margin:0px;
			padding:0px;
			box-sizing:border-box;
		}
		
	/* utilities */

		.container > * {
			display:flex;
			justify-content:center;
			align-items:center;
			font-size:25px;
		}
		.container {
			background:pink;
			width:90%;
			margin:0 auto;
			padding:5px;
		}
		a:link{
			padding:1px 10px 1px 10px;
			font-weight: bold;
			text-decoration:none;
		}
		a:hover {
			color : #ba0b30;
		}

	/* layout-2 */

		.layout-2{
			display: grid;
			grid-template-areas: "one one one" "two two two" "three six six" "three seven seven" "three eight eight" "four eight eight" "five five five";				
			grid-template-rows: 40px 40px 40px 40px 400px 480px 200px;
			grid-template-columns: 0.5fr 1fr 1fr;
			grid-gap: 5px;
		}
		@media (max-width:1100px){
			.layout-2{
				grid-template-rows: 120px 80px 80px 80px 320px 480px 200px;
				}
		}
		.col {
			width:100%;
			background: #fff;
			flex-wrap:wrap;
		}
		.one {grid-area:one;}
		.two {grid-area:two;background:#e8f3fc;}
		.three {grid-area:three;}
		.four {grid-area:four;}
		.five {grid-area:five;}
		.six {grid-area:six;}
		.seven {grid-area:seven;background:#f4f4f4;}
		.eight {grid-area:eight;}
		
		
	/* box */

		.box1{justify-content:space-between;}
		.box2{justify-content:flex-start;}
		.box3{justify-content:flex-start;}
		
	/* list */
		
		#ul1{
			width:90%;
			border:2px solid black;
			text-align:center;
		}
		#ul1 li{
			list-style:none;
			padding:10px;
		}
		ul li:hover{
			background:rgba(244, 176, 190,0.3);
		}
		#ul2{
			border-style: none none solid none;
			border-width: thin;
			border-color: #f4f4f4;
			width:90%;
			text-align:left;
		}

	/* table */

		table .gridtable{
			width:100%;
		}
		table td{
			border-bottom:3px solid #f4f4f4;
		}
		.td_desc{
			width:600px;
			word-break: break-all;	
		}
		table td img{width:200px;}
		
	</style>
		
</head>
<body>
	<div  class="container layout-2">
		<div class="col one box1">
			<div >
				<a href="javascript:;"><img src="./images/csdn.png"></a>
				<a href="javascript:;">item</a>
				<a href="javascript:;">item</a>
				<a href="javascript:;">item</a>
				<a href="javascript:;">item</a>
				<a href="javascript:;">item</a>
				<a href="javascript:;">item</a>
			</div>
			<div>
				<input type="text" placeholder="search key words" size=25px >
				<a href="javascript:;">item</a>
				<a href="javascript:;">item</a>
				<a href="javascript:;">item</a>
			</div>			
		</div>
		<div class="col two box2">
			<a href="javascript:;"><img src="./images/edu.png"></a>
			<a href="javascript:;">item</a>
			<a href="javascript:;">item</a>
			<a href="javascript:;">item</a>
			<a href="javascript:;">item</a>
			<a href="javascript:;">item</a>
			<a href="javascript:;">item</a>	
		</div>
		<div class="col three">
			<ul id="ul1">
				<li><a href="javascript:;">item</a></li>
				<li><a href="javascript:;">item</a></li>
				<li><a href="javascript:;">item</a></li>
				<li><a href="javascript:;">item</a></li>
				<li><a href="javascript:;">item</a></li>
				<li><a href="javascript:;">item</a></li>
				<li><a href="javascript:;">item</a></li>
				<li><a href="javascript:;">item</a></li>
				<li><a href="javascript:;">item</a></li>
			</ul>
		</div>
		<div class="col four">
			<ul id="ul1">
				<li><a href="javascript:;">item</a></li>
				<li><a href="javascript:;">item</a></li>
				<li><a href="javascript:;">item</a></li>
				<li><a href="javascript:;">item</a></li>
				<li><a href="javascript:;">item</a></li>
				<li><a href="javascript:;">item</a></li>
				<li><a href="javascript:;">item</a></li>
				<li><a href="javascript:;">item</a></li>
				<li><a href="javascript:;">item</a></li>
			</ul>
		</div>
		<div class="col five">Footer description</div>
		<div class="col six box2">
			<ul id="ul2">
				<a href="javascript:;">item</a>
				<a href="javascript:;">item</a>
				<a href="javascript:;">item</a>
				<a href="javascript:;">item</a>
				<a href="javascript:;">item</a>
				<a href="javascript:;">item</a>
			</ul>
		</div>
		<div class="col seven box2">
			<ul id="ul2">
				<a href="javascript:;">item</a>
				<a href="javascript:;">item</a>
				<a href="javascript:;">item</a>
				<a href="javascript:;">item</a>
				<a href="javascript:;">item</a>
				<a href="javascript:;">item</a>
			</ul>
		</div>
		<div class="col eight box3">
			<table class="gridtable" >
				<tr><td><img src="./images/a_.png"></td><td class="td_desc">product description<br>detail</td><td><a href="javascript:;">item</a></td></tr>						
				<tr><td><img src="./images/a_.png"></td><td class="td_desc">product description<br>detail</td><td><a href="javascript:;">item</a></td></tr>						
				<tr><td><img src="./images/b_.png"></td><td class="td_desc">product description<br>detail</td><td><a href="javascript:;">item</a></td></tr>						
				<tr><td><img src="./images/b_.png"></td><td class="td_desc">product description<br>detail</td><td><a href="javascript:;">item</a></td></tr>						
				<tr><td><img src="./images/c_.png"></td><td class="td_desc">product description<br>detail</td><td><a href="javascript:;">item</a></td></tr>						
				<tr><td><img src="./images/c_.png"></td><td class="td_desc">product description<br>detail</td><td><a href="javascript:;">item</a></td></tr>										
			</table>
		</div>
	</div>
</body>
</html>
